<template>
  <div id="Display">
    <el-radio-group v-model="appName" size="large">
      <el-radio-button v-for="item in appList" :key="item.route" :label="item.label" :value="item.route"
                       @click="handleClick_model(item.route)"></el-radio-button>
    </el-radio-group>
  </div>
  <br>
  <router-view v-slot="{ Component }">
    <keep-alive>
      <component :is="Component"></component>
    </keep-alive>
  </router-view>
</template>

<script setup>
import {onActivated, ref} from 'vue'

const appName = ref('chatbox')
const appList = [
  {
    route: 'chatbox',
    label: 'Chat Box' // Bert?
  },
  {
    route: 'detector',
    label: 'Detector'
  },
]

// VueRouter
import {useRouter} from "vue-router";

const router = useRouter()

function handleClick_model(item) {
  router.push({
    path: '/display/' + item
  })
}

onActivated(() => {
  router.push({
    path: '/display/' + appList[0].route
  })
  appName.value = appList[0].route
})
</script>

<style scoped lang="less">
#Display {
  width: 100%;
  height: 100%;
}

@media screen and (max-width: 900px) {
  .el-radio-group {
    display: flex;
    justify-content: center;
  }
}
</style>